<template>
	<div class="big-container">
		<div class="news-area">
			<div style="position: relative;" class="container-content">
				<div class="date-area">
					<div class="t-date">{{ new Date().getFullYear() }}年{{ new Date().getMonth() + 1 }}月</div>
					<div class="b-date"><span style="font-weight: bold;font-size: 26px;color: #759ce8;">{{ new
						Date().getDate() }}</span>日
					</div>
				</div>
				<div class="one-new">
					<div @click="toDetail(oneData.baseId, '检察要闻', '', '/newsList', '1817829252155662336', 1)"
						class="one-title">{{ oneData.title }}</div>
					<div style="margin-bottom: 15px;" class="between-layout">
						<div style="margin-left: 150px;" class="one_line" v-html="oneData.contentNon"></div>
						<div @click="toDetail(oneData.baseId, '检察要闻', '', '/newsList', '1817829252155662336', 1)"
							class="one-more">详细<i class="el-icon-d-arrow-right"></i></div>
					</div>
				</div>
				<el-row :gutter="20">
					<el-col :span="14">
						<el-carousel height="400px">
							<el-carousel-item								
								:name="item.title" v-for="item in dataList8" :key="item.baseId">
								<div @click="toDetail(item.baseId, '检察要闻', '', '/newsList', '1817829252155662336', 1)" style="position: relative;">
									<img style="width: 100%;height:400px;object-fit: cover;"
										:src="item.coverImageUrl" />
									<div class="img-top one_line">{{ item.title }}</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</el-col>
					<el-col :span="10">
						<div class="news-title between-layout">
							<div class="news-name">检察要闻</div>
							<router-link style="outline:none;"
								:to="{ path: '/newsList', query: { id: '1817829252155662336' } }">
								<div class="news-more">更多<i class="el-icon-d-arrow-right"></i></div>
							</router-link>
						</div>
						<div @click="toDetail(item.baseId, '检察要闻', '', '/newsList', '1817829252155662336', 1)"
							v-for="(item, index) in dataList1" :key="index" class="between-layout news-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{ item.title }}</div>
							</div>
							<div class="item-date">[{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}]</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div style="padding: 20px 0;" class="container-content">
			<el-row :gutter="30">
				<el-col :span="12">
					<div class="com-title between-layout">
						<div class="com-name">检察业务</div>
						<router-link style="outline:none;"
							:to="{ path: '/business', query: { id: '1817842224282300416' } }">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList2 && dataList2.length == 0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId, '检察业务', '', '/business', '1817842224282300416')"
							v-for="(item, index) in dataList2" :key="index" class="between-layout news-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{ item.title }}</div>
							</div>
							<div class="item-date">[{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}]</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="com-title between-layout">
						<div class="com-name">机关党建</div>
						<router-link style="outline:none;"
							:to="{ path: '/affairsOpen', query: { id: '1817835226660691968', twoId: '1817841735478112256', name: '党建工作' } }">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList3 && dataList3.length == 0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId, '检务公开', '党建工作', '/affairsOpen', '1817835226660691968')"
							v-for="(item, index) in dataList3" :key="index" class="between-layout news-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{ item.title }}</div>
							</div>
							<div class="item-date">[{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}]</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin: 20px 0;" :gutter="30">
				<el-col style="padding-left: 0;" :span="12">
					<div class="com-title between-layout">
						<div class="com-name">理论研究</div>
						<router-link style="outline:none;"
							:to="{ path: '/theoryResearch', query: { id: '1817842526263799808'} }">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList4 && dataList4.length == 0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId, '理论研究', '', '/theoryResearch', '1817842526263799808')"
							v-for="(item, index) in dataList4" :key="index" class="between-layout news-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{ item.title }}</div>
							</div>
							<div class="item-date">[{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}]</div>
						</div>
					</div>
				</el-col>
				<el-col style="padding-right: 0;" :span="12">
					<div class="com-title between-layout">
						<div class="com-name">法律法规</div>
						<router-link style="outline:none;"
							:to="{ path: '/theoryResearch', query: { id: '1817842526263799808', twoId: '1817842566558478336', name: '法律法规' } }">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList5 && dataList5.length == 0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId, '理论研究', '法律法规', '/theoryResearch', '1817842526263799808')"
							v-for="(item, index) in dataList5" :key="index" class="between-layout news-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{ item.title }}</div>
							</div>
							<div class="item-date">[{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}]</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="com-title between-layout">
				<div class="com-name">领导班子</div>
				<router-link style="outline:none;"
					:to="{ path: '/agencySet', query: { id: '1817830386937192448', twoId: '1817834651952963584', name: '院领导' } }">
					<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
				</router-link>
			</div>
			<div style="padding: 26px;background-color: #F0F8FF;border-radius: 10px;margin-top: 20px;"
				class="start-layout">
				<div style="color: #174B8C;font-size: 24px;font-weight: bold;">
					领<br />
					导<br />
					班<br />
					子
				</div>
				<div @click="toDetail(item.baseId, '检务公开', '院领导', '/affairsOpen', '1817834651952963584', 2)"
					v-for="(item, index) in dataList7" :key="index" class="start-layout"
					style="width: 23%;cursor: pointer;">
					<img style="width: 100px;height: 140px;margin-left: 20px;object-fit: cover;"
						:src="item.avatarUrl" />
					<div style="margin-left: 15px;text-align: center;">
						<div style="color: #174B8C;font-size: 20px;font-weight: bold;">{{ item.name }}</div>
						<div class="posi-area" style="font-size: 16px;color: #333333;margin-top: 10px;">
							{{ item.position }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="swiper-box">
			<div class="container-content center-layout" style="padding-left: 100px;position: relative;">
				<div class="swiper-title center-layout"><span style="margin-right: 10px;">检</br>察</br>文</br>化</span>
				</div>
				<div style="margin-top: 40px;" class="swiper-container">
					<div class="swiper-wrapper">
						<div @click="toDetail(item.baseId, '检察文化', '摄影欣赏', '/baseBuilding', '1817842779088056320')"
							v-for="item in dataList6" :key="item.baseId" class="swiper-slide">
							<img class="swiper-img" :src="item.coverImageUrl"
								style="width: 200px; height: 150px; object-fit: cover;" />
						</div>
					</div>
					<div class="swiper-button-next"></div>
					<div class="swiper-button-prev"></div>
				</div>
			</div>
		</div>
		<div class="container-content">
			<div class="link-area">
				<div class="main-name">网上检察服务大厅</div>
				<div @click="linkType = 1" :class="linkType == 1 ? 'link-active' : ''" class="link-item center-layout">
					<img style="width: 29px;height: 21px;" class="link-img" src="@/assets/image/wyk.png" />我要看
				</div>
				<div @click="linkType = 2" :class="linkType == 2 ? 'link-active' : ''" class="link-item center-layout">
					<img style="width: 24px;height: 24px;" class="link-img" src="@/assets/image/wyc.png" />我要查
				</div>
				<div @click="linkType = 3" :class="linkType == 3 ? 'link-active' : ''" class="link-item center-layout">
					<img style="width: 20px;height: 24px;" class="link-img" src="@/assets/image/wyb.png" />我要办
				</div>
			</div>
			<div v-if="linkType == 1" class="link-box start-layout">
				<div style="width: 200px;" @click="toLink(item.url)" v-for="(item, index) in linkList1" :key="index"
					class="start-layout news-item">
					<div class="item-dot"></div>
					<div class="item-name one_line">{{ item.name }}</div>
				</div>
			</div>
			<div v-if="linkType == 2" class="link-box start-layout">
				<div style="width: 200px;" @click="toLink(item.url)" v-for="(item, index) in linkList2" :key="index"
					class="start-layout news-item">
					<div class="item-dot"></div>
					<div class="item-name one_line">{{ item.name }}</div>
				</div>
			</div>
			<div v-if="linkType == 3" style="flex-wrap: wrap;" class="link-box start-layout">
				<div style="width: 200px;" @click="toLink(item.url)" v-for="(item, index) in linkList3" :key="index"
					class="start-layout news-item">
					<div class="item-dot"></div>
					<div class="item-name one_line">{{ item.name }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import {
	getFrontList,
	getNewsList,
	getCarousel,
	getMemberList
} from "@/api/index";
export default {
	data() {
		return {
			linkType: 1,
			linkList1: [{
				name: '12309中国检察网',
				url: 'https://www.12309.gov.cn/'
			}, {
				name: '中国检察听证网',
				url: 'https://jctz.12309.gov.cn/'
			}, {
				name: '法律法规数据库',
				url: 'https://flk.npc.gov.cn/'
			}, {
				name: '人民检察院公报',
				url: 'https://www.spp.gov.cn/gjgb/'
			}],
			linkList2: [{
				name: '案件信息查询',
				url: 'https://www.12309.gov.cn/12309/gj/hen/sqs/index.shtml?channelLevels=/fb5a41c9247547bca03ae21326c3ad51/e2d8081e3a3640719cf2b3dedfb39725/edb7e3b634ed42769a0c99180e27d072/56a5a8a5a09e4c32baa39c6caa6e5225'
			}, {
				name: '法律文书',
				url: 'https://www.12309.gov.cn/12309/gj/hen/zjxflws/index.shtml?channelLevels=/fb5a41c9247547bca03ae21326c3ad51/e2d8081e3a3640719cf2b3dedfb39725/edb7e3b634ed42769a0c99180e27d072'
			}, {
				name: '重要案件信息',
				url: 'https://www.12309.gov.cn/12309/gj/hen/zzs/zdajxx/index.shtml?channelLevels=/fb5a41c9247547bca03ae21326c3ad51/e2d8081e3a3640719cf2b3dedfb39725/edb7e3b634ed42769a0c99180e27d072/2b383770eeea4d1ea3aaae9e4c3a31d3'
			}, {
				name: '检察建议',
				url: 'https://www.spp.gov.cn/spp/zdgz/201902/t20190226_409297.shtml'
			}],
			linkList3: [{
				name: '控告 申诉 举报',
				url: 'https://www.12309.gov.cn/12309/index.shtml'
			}, {
				name: '网上信访',
				url: 'https://www.12309.gov.cn/12309/wsxf/index.shtml'
			}, {
				name: '民事申诉案件预约',
				url: ''
			}, {
				name: '律师服务',
				url: 'https://www.12309.gov.cn/front-cas/login?service=https://www.12309.gov.cn/sppWeb/j_spring_cas_security_check'
			}, {
				name: '在线阅卷',
				url: 'http://yc.hbjc.gov.cn/wsjcfwdt_74065/wyb_74068/202204/P020220411364020950946.pdf'
			}, {
				name: '申请公开听证',
				url: 'https://www.spp.gov.cn/spp/xwfbh/wsfbh/202010/t20201020_482537.shtml'
			}, {
				name: '申请司法救助',
				url: ''
			}],
			swiper: null,
			swiperList: [{
				id: 1,
				title: '采集国家二级保护野生植物审批',
				imgUrl: require("@/assets/image/towbg.png"),
			}, {
				id: 2,
				title: '农村危房改造',
				imgUrl: require("@/assets/image/towbg.png"),
			}, {
				id: 3,
				title: '乡村医生执业注册',
				imgUrl: require("@/assets/image/towbg.png"),
			}, {
				id: 4,
				title: '采集国家二级保护野生植物审批',
				imgUrl: require("@/assets/image/towbg.png"),
			}, {
				id: 5,
				title: '农村危房改造',
				imgUrl: require("@/assets/image/towbg.png"),
			}, {
				id: 6,
				title: '乡村医生执业注册',
				imgUrl: require("@/assets/image/towbg.png"),
			}],
			dataList1: [],
			dataList2: [],
			dataList3: [],
			dataList4: [],
			dataList5: [],
			dataList6: [],
			dataList7: [],
			dataList8: [],
			oneData: {}
		}
	},
	mounted() {
		window.scrollTo(0, 0);
		this.init()
		this.getSwiper()
	},
	methods: {
		init() {
			//检察要闻
			getNewsList({
				tenantId: process.env.VUE_APP_TENANTID,
				pageSize: 8,
				pageNum: 1
			}).then(res => {
				this.dataList1 = res.rows
				if (this.dataList1.length > 0) {
					this.oneData = this.dataList1[0]
				}
			})
			getCarousel(process.env.VUE_APP_TENANTID).then(res => {
				this.dataList8 = res.data
			})
			//检务公开
			getFrontList({
				tenantId: process.env.VUE_APP_TENANTID,
				pageSize: 6,
				pageNum: 1
			}, {
				typeAncestors: '1817842224282300416'
			}).then(res => {
				this.dataList2 = res.rows
			})
			//机关党建
			getFrontList({
				tenantId: process.env.VUE_APP_TENANTID,
				pageSize: 6,
				pageNum: 1
			}, {
				typeAncestors: '1817841735478112256'
			}).then(res => {
				this.dataList3 = res.rows
			})
			//典型案例
			getFrontList({
				tenantId: process.env.VUE_APP_TENANTID,
				pageSize: 6,
				pageNum: 1
			}, {
				typeAncestors: '1817842526263799808'
			}).then(res => {
				this.dataList4 = res.rows
			})
			//法律法规
			getFrontList({
				tenantId: process.env.VUE_APP_TENANTID,
				pageSize: 6,
				pageNum: 1
			}, {
				typeAncestors: '1817842566558478336'
			}).then(res => {
				this.dataList5 = res.rows
			})
			//院领导
			getMemberList({
				tenantId: process.env.VUE_APP_TENANTID,
				pageSize: 5,
				pageNum: 1
			}, {
				type: '1817834651952963584'
			}).then(res => {
				this.dataList7 = res.rows
			})
			//检察文化
			getFrontList({
				tenantId: process.env.VUE_APP_TENANTID,
				pageSize: 6,
				pageNum: 1
			}, {
				typeAncestors: '1817842779088056320'
			}).then(res => {
				this.dataList6 = res.rows
			})
		},
		getSwiper() {
			const dataLength = this.dataList6.length;
			this.swiper = new Swiper(".swiper-container", {
				loop: dataLength > 1,
				autoplay: {
					delay: 3000,  // 3秒自动切换
					disableOnInteraction: false,
				},
				slidesPerView: 'auto',
				centeredSlides: dataLength > 1,
				spaceBetween: 30,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				breakpoints: {
					320: { slidesPerView: 1, centeredSlides: false },
					768: {
						slidesPerView: dataLength > 2 ? 2 : 'auto',
						centeredSlides: false
					},
					1200: {
						slidesPerView: dataLength > 4 ? 4 : 'auto',
						centeredSlides: false
					}
				},
				paginationClickable: true,
				observer: true,
				observeParents: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			})
		},
		toDetail(id, routeName, twoName, routePath, routeId, type) {
			this.$router.push({
				name: 'commonDetail',
				query: {
					id: id,
					name: routeName,
					twoName: twoName,
					routePath: routePath,
					routeId: routeId,
					type: type
				}
			})
		},
		toLink(url) {
			window.open(url, '_blank');
		}
	}
}
</script>

<style scoped lang="scss">
.posi-area {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
	-webkit-line-clamp: 4;
	word-break: break-all;
}

.news-area {
	width: 100%;

	.one-new {
		padding-top: 20px;

		.one-title {
			line-height: 65px;
			text-align: center;
			color: #34332f;
			font-weight: bold;
			font-size: 27px;
			//margin-bottom: 10px;
			margin: 0 100px 10px 135px;
			cursor: pointer;
		}

		.one-more {
			flex-shrink: 0;
			margin-left: 40px;
			color: #1546a6;
			font-size: 16px;
			cursor: pointer;
		}
	}

	.news-title {
		height: 40px;
		background: url(~@/assets/image/xjdt.png) no-repeat;
		background-size: 100% 100%;
		padding: 0 10px 0 45px;

		.news-name {
			font-size: 18px;
			font-weight: bold;
			color: #f5f6fa;
		}

		.news-more {
			font-size: 14px;
			color: #f5f6fa;
			cursor: pointer;
		}

		.news-more:hover {
			color: #024B82;
		}
	}

}

.news-item {
	margin-top: 20px;

	.item-dot {
		width: 3px;
		height: 3px;
		background-color: #2451ad;
		border-radius: 50%;
		margin-right: 6px;
		flex-shrink: 0;
	}

	.item-name {
		font-size: 16px;
		color: #474747;
		cursor: pointer;
	}

	.item-name:hover {
		color: #024B82;
	}

	.item-date {
		font-size: 16px;
		margin-left: 30px;
		color: #999999;
		flex-shrink: 0;
	}
}

.com-title {
	height: 40px;
	background: url(~@/assets/image/combg.png) no-repeat;
	background-size: 100% 100%;
	padding: 0 10px 0 45px;


	.com-name {
		color: #2451ad;
		font-size: 18px;
		font-weight: bold;
	}

	.com-more {
		color: #2451ad;
		font-size: 14px;
		cursor: pointer;
	}
}

.swiper-box {
	background: url(~@/assets/image/towbg.png) no-repeat;
	background-size: 100% 100%;
	height: 230px;
	margin-bottom: 30px;

	.swiper-title {
		position: absolute;
		top: -10px;
		left: 0;
		width: 81px;
		height: 250px;
		background: url(~@/assets/image/index_19.png) no-repeat;
		background-size: 100% 100%;
		color: white;
		font-size: 20px;
		font-weight: 600;
	}
}

.swiper-container {
	width: 100%;
	padding: 0 50px;
}

.swiper-slide {
	width: auto !important;
	flex-shrink: 0;

	.swiper-img {
		width: 200px;
	}
}

.el-carousel__item h3 {
	color: #475669;
	font-size: 14px;
	opacity: 0.75;
	line-height: 150px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}

.date-area {
	position: absolute;
	top: 30px;
	left: 0;

	.t-date {
		width: 120px;
		line-height: 22px;
		color: #fff;
		font-size: 14px;
		background-color: #759CE8;
		border-radius: 5px 5px 0 0;
		text-align: center;
	}

	.b-date {
		width: 120px;
		line-height: 54px;
		color: #759ce8;
		font-size: 14px;
		text-align: center;
		background-color: #F5F5F5;
	}
}

.link-area {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 74px;
	background: url(~@/assets/image/wsfwdt.png) no-repeat;
	background-size: 100% 100%;
	line-height: 74px;
	font-size: 18px;
	font-weight: bold;
	color: #ffffff;

	.main-name {
		width: 210px;
		line-height: 30px;
		text-align: center;
		border-right: 1px solid #567cc9;
	}

	.link-item {
		width: 200px;
		text-align: center;
		cursor: pointer;
	}

	.link-item:hover {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.link-active {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.link-img {
		flex-shrink: 0;
		display: block;
		margin-right: 10px;
	}
}

.link-box {
	margin-top: 13px;
	border-top: 2px solid #2451ad;
	background: #ecf3f9;
	padding: 0 20px 20px 20px;
	margin-bottom: 30px;
}
</style>